<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue-data-tables Document</title>
  <meta name="description" content="Description">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css" >
  <link rel="stylesheet" href="//unpkg.com/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="css/compatible.css">
  <style>
    .blog-corner {
      position: fixed;
      right: 0;
      bottom: 0;
      width: 0;
      height: 0;
      border-top: 40px solid transparent;
      border-left: 40px solid transparent;
      border-right: 40px solid #606266;
      border-bottom: 40px solid #606266;
      z-index: 1;
    }
  </style>
    <!-- GrowingIO Analytics code version 2.1 -->
    <!-- Copyright 2015-2018 GrowingIO, Inc. More info available at http://www.growingio.com -->
    
    <script type='text/javascript'>
    !function(e,t,n,g,i){e[i]=e[i]||function(){(e[i].q=e[i].q||[]).push(arguments)},n=t.createElement("script"),tag=t.getElementsByTagName("script")[0],n.async=1,n.src=('https:'==document.location.protocol?'https://':'http://')+g,tag.parentNode.insertBefore(n,tag)}(window,document,"script","assets.giocdn.com/2.1/gio.js","gio");
      gio('init','aefd9176b0bbe64a', {});
    
    //custom page code begin here
    
    //custom page code end here
    
    gio('send');
    
    </script>
    
    <!-- End GrowingIO Analytics code version: 2.1 -->
</head>
<body>
  <div id="app"></div>
  <a class='blog-corner' target='_blank' href='//www.njleonzhang.com'>
    <svg t="1537495824569" class="icon" style="" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4360" xmlns:xlink="http://www.w3.org/1999/xlink" width="30" height="30"><defs><style type="text/css"></style></defs><path d="M206.941091 615.959273c24.250182-20.922182 36.375273-48.290909 36.375273-82.082909 0-27.205818-8.005818-49.268364-23.970909-66.280728-15.988364-16.989091-37.306182-27.042909-63.930182-30.161454v-1.093818c21.317818-6.981818 38.027636-18.734545 50.152727-35.281455 12.125091-16.523636 18.176-35.979636 18.176-58.414545 0-26.810182-10.007273-48.570182-30.045091-65.303273S146.618182 252.276364 112.453818 252.276364H0.023273v395.101091h115.176727c36.910545-0.023273 67.490909-10.472727 91.741091-31.418182zM46.312727 294.144h53.178182c50.501818 0 75.752727 19.2 75.752727 57.576727 0 22.248727-7.261091 39.447273-21.76 51.665455s-34.443636 18.315636-59.787636 18.315636H46.312727v-127.557818z m0 169.169455h53.178182c63.534545 0 95.325091 23.342545 95.325091 69.98109 0 22.411636-7.493818 40.052364-22.458182 52.89891-14.987636 12.869818-36.049455 19.293091-63.232 19.29309H46.312727v-142.17309zM317.44 251.461818h45.172364v395.892364h-45.172364V251.461818zM674.373818 607.301818c25.437091-27.089455 38.167273-63.138909 38.167273-108.125091 0-45.940364-11.822545-81.850182-35.397818-107.729454-23.621818-25.902545-56.436364-38.842182-98.490182-38.842182-44.101818 0-79.080727 13.312-104.983273 39.959273s-38.842182 63.650909-38.842182 111.034181c0 43.52 12.427636 78.475636 37.329455 104.820364 24.878545 26.368 58.181818 39.540364 99.886545 39.540364 42.775273-0.023273 76.893091-13.568 102.330182-40.657455z m-193.28-105.402182c0-34.722909 8.448-61.952 25.344-81.687272 16.896-19.758545 39.842909-29.626182 68.887273-29.626182 29.207273 0 51.665455 9.565091 67.351273 28.648727 15.732364 19.106909 23.575273 46.289455 23.575272 81.547636 0 34.909091-7.842909 61.812364-23.575272 80.733091-15.685818 18.920727-38.144 28.392727-67.351273 28.392728-28.672 0-51.549091-9.634909-68.608-28.928-17.082182-19.293091-25.623273-45.637818-25.623273-79.080728z" fill="#fff" p-id="4361"></path><path d="M1025.512727 618.728727V359.191273h-45.172363v39.121454h-1.093819c-18.385455-30.487273-46.568727-45.730909-84.596363-45.730909-40.052364 0-71.586909 14.149818-94.626909 42.426182-23.063273 28.276364-34.583273 66.397091-34.583273 114.338909 0 42.24 10.705455 75.915636 32.093091 100.980364 21.410909 25.088 49.664 37.608727 84.736 37.608727 43.170909 0 75.496727-17.989818 97.000727-53.992727h1.093818v30.859636c0 28.928-5.329455 52.177455-16.011636 69.771636l-22.830545 24.157091-0.977455 0.674909c-7.144727 4.398545-57.716364 32.721455-130.117818-0.558545-78.219636-36.002909-189.533091-38.958545-216.948364 55.296l32.279273 24.855273s0-44.357818 49.989818-62.114909c37.143273-13.172364 77.568 3.467636 109.568 17.198545v0.186182c9.192727 4.654545 18.920727 8.494545 29.207273 11.496727l0.488727 0.162909a225.047273 225.047273 0 0 0 61.765818 8.215273c99.141818 0 148.736-51.828364 148.736-155.415273z m-69.003636-35.816727c-15.918545 17.989818-36.514909 26.996364-61.858909 26.996364-24.971636 0-45.056-9.402182-60.206546-28.253091-15.150545-18.827636-22.737455-43.938909-22.737454-75.357091 0-36.538182 7.889455-64.954182 23.691636-85.248s37.655273-30.464 65.582546-30.464c22.597818 0 41.448727 7.982545 56.622545 23.970909 15.150545 15.988364 22.737455 35.165091 22.737455 57.576727v41.611637c0 28.090182-7.959273 51.153455-23.831273 69.166545z" fill="#fff" p-id="4362"></path></svg>
  </a>
  <script src="//unpkg.com/vue@2.7.14/dist/vue.js"></script>
  <script src="//unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script src="//unpkg.com/docsify-demo-box-vue/dist/docsify-demo-box-vue.min.js"></script>
  <script src="//unpkg.com/docsify-edit-on-github/index.js"></script>
  <script src="//unpkg.com/element-ui/lib/index.js"></script>
  <script src="//unpkg.com/element-ui/lib/umd/locale/en.js"></script>
  <script src="//unpkg.com/vue-data-tables@3.4.5/dist/data-tables.min.js"></script>
  <script src="//unpkg.com/json2csv@3.9.1/dist/json2csv.js"></script>

  <script>
    Vue.use(DataTables)
    ELEMENT.locale(ELEMENT.lang.en)

    var data, titles;
    var id = 0;

    var define =
  `data = [{
    "content": "Water flood",
    "flow_no": "FW201601010001",
    "flow_type": "Repair",
    "flow_type_code": "repair",
    }, {
    "content": "Lock broken",
    "flow_no": "FW201601010002",
    "flow_type": "Repair",
    "flow_type_code": "repair",
    }, {
    "content": "Help to buy some drinks",
    "flow_no": "FW201601010003",
    "flow_type": "Help",
    "flow_type_code": "help"
  }];

  titles = [{
    prop: "flow_no",
    label: "NO."
    }, {
    prop: "content",
    label: "Content"
    }, {
    prop: "flow_type",
    label: "Type"
  }]`

    var fakeHttp =
`
// fake server
let serverData = []
for (let i = 0; i < 1000; i++) {
  serverData.push({
    'content': 'Lock broken' + i,
    'flow_no': 'FW20160101000' + i,
    'flow_type': i % 2 === 0 ? 'Repair' : 'Help',
    'flow_type_code': i % 2 === 0 ? 'repair' : 'help',
  })
}

let mockServer = function(res) {
  let datas = serverData.slice()
  let allKeys = Object.keys(data[0])

  // do filter
  res && res.filters && res.filters.forEach(filter => {
    datas = datas.filter(data => {
      let props = (filter.search_prop && [].concat(filter.search_prop)) || allKeys
      return props.some(prop => {
        if (!filter.value || filter.value.length === 0) {
          return true
        }
        return [].concat(filter.value).some(val => {
           return data[prop].toString().toLowerCase().indexOf(val.toLowerCase()) > -1
        })
      })
    })
  })

  // do sort
  if (res.sort && res.sort.order) {
    let order = res.sort.order
    let prop = res.sort.prop
    let isDescending = order === 'descending'

    datas.sort(function(a, b) {
      if (a[prop] > b[prop]) {
        return 1
      } else if (a[prop] < b[prop]) {
        return -1
      } else {
        return 0
      }
    })
    if (isDescending) {
      datas.reverse()
    }
  }

  return {
    data: datas.slice((res.page - 1) * res.pageSize, res.page * res.pageSize),
    req: res,
    ts: new Date(),
    total: datas.length
  }
}

let i = 1

// fake http
function http(res, time = 200) {
  return new Promise((resolve, reject) => {
    setTimeout(_ => {
      var data = mockServer(res)
      console.log('fake server return data: ', data)
      resolve(data)
    }, time)
  })
}`
    eval(define)
    eval(fakeHttp)

    var jsResources = '<scr' + 'ipt src="//unpkg.com/vue/dist/vue.js"></scr' + 'ipt>'
      + '\n<scr' + `ipt src="//unpkg.com/element-ui/lib/index.js"></scr` + 'ipt>'
      + '\n<scr' + `ipt src="//unpkg.com/element-ui/lib/umd/locale/en.js"></scr` + 'ipt>'
      + '\n<scr' + `ipt src="//unpkg.com/vue-data-tables@3.4.5/dist/data-tables.min.js"></scr` + 'ipt>'
    var cssResources = '@import url("//unpkg.com/element-ui/lib/theme-chalk/index.css");'
    var bootCode =
      'ELEMENT.locale(ELEMENT.lang.en)\n'
      + 'Vue.use(DataTables.DataTables)\n'
      + 'Vue.use(DataTables.DataTablesServer)\n'
      + 'var data, titles\n\n' + define + '\n'
      + fakeHttp + '\n\n';

    window.$docsify = {
      coverpage: [
        '/',
        '/en-us/',
        '/zh-cn/'
      ],
      name: 'vue-data-tables',
      repo: 'https://github.com/njleonzhang/vue-data-tables',
      subMaxLevel: 2,
      loadSidebar: true,
      loadNavbar: true,
      search: 'auto', // default,

      plugins: [
        DemoBoxVue.create(jsResources, cssResources, bootCode),
        EditOnGithubPlugin.create(
          'https://github.com/njleonzhang/vue-data-tables/blob/master/docs/'
        ),
        function (hook) {
          var footer = [
            '<hr/>',
            '<footer>',
            '<span><a href="https://github.com/njleonzhang">leon zhang</a> &copy;2017.</span>',
            '<span>Proudly published with <a href="https://github.com/QingWei-Li/docsify" target="_blank">docsify</a>.</span>',
            '</footer>'
          ].join('')

          hook.afterEach(function (html) {
            return html + footer
          })
        },
      ]
    }
  </script>
  <script src="//unpkg.com/docsify@3/lib/docsify.min.js"></script>
  <script src="//unpkg.com/docsify/lib/plugins/external-script.min.js"></script>
  <script src="//unpkg.com/docsify/lib/plugins/search.min.js"></script>

  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-110377374-1"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'UA-110377374-1');
  </script>
</body>
</html>
